<template>
  <div class="body">
    <!-- 顶部导航栏 -->
    <div class="top_navigation">
      <!-- 单个选项 -->
      <div class="option_single higlight_font">
        <div class="highlight"></div>
        杂技
      </div>
      <div class="option_single">
        跳舞
      </div>
      <div class="option_single">
        唱歌
      </div>
    </div>
    <!-- 主图和信息 -->
    <div class="main_image">
      <img src="../assets/Mainimage.png" alt="">
      <div class="message">
        <h2>国宝大熊猫</h2>
        <p>入驻五龙山分别是大熊猫“双雄”和“娇奥”双雄,2016年8月5日出生于成都大熊猫</p>
      </div>
    </div>
    <!-- 单个信息 -->
    <div class="single_information" v-for="(item, index) in StrategyData" :key="item.id" @click="targetPage(item.id)">
      <!-- 信息中的图片 -->
      <div class="massage_img">
        <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
      </div>
      <!-- 信息的文字内容 -->
      <div class="massage_text">
        <h4>{{ item.title }}</h4>
        <p>{{ item.introduce }}</p>
        <!-- 头像与名称 -->
        <div class="massage_avatar">
          <img :src="'https://jingqu.kuxia.top' + item.img" alt="">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <!-- 暂无提示 -->
    <div class="not_yet">
      没有更多了…
    </div>
    <!-- 底部导航栏 -->
    <div class="Bottom_navigation">
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="/">
          <img src="../assets/bottom_home.png" alt="">
          <p>首页</p>
        </router-link>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option active">
        <img src="../assets/local_florist.png" alt="">
        <p>攻略</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <div class="publish">
          <img src="../assets/plane.png" alt="">
        </div>
        <img src="" alt="">
        <p>发布</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <img src="../assets/scenic.png" alt="">
        <p>排行榜</p>
      </div>
      <!-- 底部单个选项 -->
      <div class="bottom_single_option">
        <router-link to="mine">
          <img src="../assets/account_circle.png" alt="">
          <p>我的</p>
        </router-link>
      </div>
    </div>
  </div>

</template>

<script setup>
import { ref } from 'vue';
import { StrategyIndex } from '../api/scenic.js';
import { useRouter } from 'vue-router';
function targetPage(id) {
  router.push({
    path: '/Introcom',
    query: {
      id: id
    }
  });
}
const router = useRouter();
const StrategyData = ref(null);

StrategyIndex({ scenic_id: 2 }).then(function (res) {
  console.log(res); // 成功回调
  StrategyData.value = res.data;
});
</script>

<style scoped>
.body {
  height: 100%;
  background-color: #F4F4F4;
}

/* 顶部导航栏 */
.top_navigation {
  width: 100%;
  height: 30px;
  display: flex;
  padding: 5px 20px 0px 20px;
  justify-content: space-between;
}


/* 单个选项 */
.option_box {
  width: 45%;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.option_single {
  position: relative;
}

.higlight_font {
  color: #2A82E4;
}

/* 高亮的下划线 */
.highlight {
  width: 30px;
  height: 2px;
  left: 3%;
  bottom: -5px;
  border-radius: 10px;
  background-color: #2A82E4;
  position: absolute;
}

/* 主图内容 */
.main_image {
  width: 96%;
  margin: 2%;
  margin-top: 2%;
  border-radius: 5px;
  overflow: hidden;
  /* 核心阴影设置 */
  background: white;
}

.main_image img {
  width: 100%;
}

/* 主图底部的文字 */
.message {
  padding: 2%;
  font-size: 13px;
}

/* 单个信息的盒子 */
.single_information {
  width: 96%;
  margin: 2%;
  display: flex;
  margin-top: 1%;
  padding: 1% 1% 2% 1%;
  background-color: white;
}

/* 信息中的图片 */
.massage_img {
  width: 20%;
  margin: 1%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.massage_img img {
  width: 100%;
  max-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  overflow: hidden;
}

/* 文字信息 */
.massage_text {
  width: 70%;
  margin-left: 3%;
}

.massage_text h4 {
  font-weight: 800;
}

.massage_text p {
  font-size: 13px;
}

.massage_avatar {
  display: flex;
  align-items: center;
}

.massage_avatar img {
  width: 20px;
  height: 20px;
  border-radius: 25px;
  overflow: hidden;
  margin-top: 5px;
  margin-right: 5px;
}

.line {
  height: 50px;
}
</style>